<template>
  <div class="upload-container">
    <a-card title="对账单匹配" :bordered="false" class="upload-card">
      <div class="upload-wrapper">
        <!-- 关键修改1：用Flex容器包裹“说明文本”和“日期选择框” -->
        <div class="date-picker-group">
          <!-- 添加“时间范围”组件说明 -->
          <span class="date-label">入库单匹配时间范围：</span>
          <!-- 关键修改2：给日期选择框加宽度限制，避免横跨界面 -->
          <a-range-picker 
            :show-time="false" 
            value-format="YYYY-MM-DD" 
            v-model:value="createTime"
            class="query-group-cust date-picker"  
          />
        </div>

        <JUpload 
          v-model:value="uploadModalValue" 
          class="upload-area" 
          :showUploadList="true" 
          :maxCount="1" 
        />
        
        <a-button 
          type="primary" 
          size="large" 
          class="match-btn" 
          @click="onchange" 
          :loading="loading"
          :disabled="loading || (hasProcessed && uploadModalValue)"
        >
          <template #icon>
            <DownloadOutlined />
          </template>
          {{ loading ? '匹配中...' : (hasProcessed && uploadModalValue) ? '点击文件下载匹配结果' : '开始匹配' }}
        </a-button>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
// 脚本逻辑保持不变，无需修改
import { defHttp } from '/@/utils/http/axios';
import { onMounted, ref, watch } from 'vue';
import { DownloadOutlined } from '@ant-design/icons-vue';
import { JUpload } from '/@/components/Form/src/jeecg/components/JUpload';
import { Card as ACard } from 'ant-design-vue';
import { downloadFile } from '/@/utils/common/renderUtils';

const uploadModalValue = ref('');
const createTime = ref([""]);
const loading = ref(false);
const hasProcessed = ref(false);

// onMounted(() => {
//   createTime.value = ["2025-09-01", "2025-09-30"];
// });

watch(uploadModalValue, (newVal) => {
  if (!newVal) {
    hasProcessed.value = false;
    return;
  }
  let params = { filepath: newVal };
  defHttp.get({ url: '/Ticket/ticket/getDateRangeFromFile', params }).then((res) => {
    console.log(res);
    createTime.value = res;
  });
});

watch(createTime, (newVal) => {
  console.log(newVal);
});

const onchange = () => {
  if (!uploadModalValue.value) {
    alert('请先上传文件');
    return;
  }
  let params = { params: uploadModalValue.value,dateRange:createTime.value.join(',') };
  loading.value = true;
  defHttp.get({ url: '/Ticket/ticket/processAndDownload', params }).then((res) => {
    console.log(res);
    hasProcessed.value = true;
  }).finally(() => {
    loading.value = false;
  });
};
</script>

<style scoped>
/* 原有样式保持不变，新增以下3个样式类 */
/* 1. Flex容器：控制说明文本与日期选择框的排列 */
.date-picker-group {
  display: flex;
  align-items: center;  /* 垂直居中对齐 */
  gap: 8px;  /* 文本与选择框之间的间距 */
}

/* 2. “时间范围”说明文本：控制字体样式 */
.date-label {
  font-size: 14px;
  color: #666;  /* 灰色文本，避免与主内容冲突 */
  white-space: nowrap;  /* 防止文本换行 */
}

/* 3. 日期选择框：限制宽度，避免横跨界面（可根据需求调整宽度值） */
.date-picker {
  width: 400px !important;  /* !important 确保覆盖组件默认宽度 */
  max-width: 100%;  /* 响应式适配：小屏幕时不超过父容器宽度 */
}

/* 原有样式 */
.upload-container {
  padding: 24px;
  background: #f0f2f5;
  min-height: 100vh;
}
.upload-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.upload-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;  /* 各组件之间的垂直间距，保持原有逻辑 */
  padding: 0 20px;  /* 可选：给上传容器加左右内边距，优化整体布局 */
}
.upload-area {
  border: 2px dashed #d9d9d9;
  border-radius: 4px;
  padding: 20px;
  transition: border-color 0.3s;
}
.upload-area:hover {
  border-color: #1890ff;
}
.match-btn {
  width: 100%;
  height: 40px;
  font-weight: 500;
}
</style>